<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script src="./axios.min.js"></script>
  <script>
    // 在全局对象中 axios 对象
    // axios 提供了五种便捷方法

    // get请求  补充：如果有get传参
    // 1. 笨方法：地址?key=value&key1=value1
    // 2. 便利方法：get()的第二个参数传入一个对象 {params:{参数对象}}
    // axios.get('http://localhost:3000/brands', {
    //   params: {
    //     brandName_like: '奥'
    //   }
    // }).then(res => {
    //   // res 是响应对象（响应主体，响应状态行,响应头）
    //   // res.data 是响应主体（后端返回数据在响应主体中）
    //   console.log(res.data)
    // })

    // post请求 
    // 1. post是请求体传参 post()的第二个参数
    // axios.post('http://localhost:3000/brands',{
    //   brandName: '宝马',
    //   createTime: new Date()
    // }).then(res=>{
    //   // 成功
    //   console.log(res.data)
    // }).catch(err=>{
    //   // 失败
    //   // err.message 错误信息
    //   console.log(`错误原因：${err.message}`)
    // })

    // delete请求
    // axios.delete('http://localhost:3000/brands/4')
    //   .then(res => {
    //     console.log('删除成功')
    //   }).catch(err => {
    //     console.log('删除失败')
    //   })

    // put请求  是请求体传参 put()的第二个参数
    // axios.put('http://localhost:3000/brands/3', {
    //   brandName: '宝马',
    //   createTime: new Date()
    // }).then(res => {
    //   console.log('修改成功')
    // }).catch(err => {
    //   console.log('修改失败')
    // })

    // patch请求  是请求体传参 patch()的第二个参数
    // axios.patch('http://localhost:3000/brands/3', {
    //   brandName: '宝马3系',
    // }).then(res => {
    //   console.log('修改成功')
    // }).catch(err => {
    //   console.log('修改失败')
    // })

    // 综合写法
    axios({
      // 请求方式  get|post|put|patch|delete
      method: 'get',
      // 地址
      url: 'http://localhost:3000/brands',

      // 如果是get请求 在params传参
      params: {
        brandName_like: '3'
      },

      // 出去get外，都是请求体传参
      // data: {
      //   brandName: '宝马',
      //   createTime: new Date()
      // }

      // 请求头传参
      // headers: {
      //   'Content-Type': 'application/json'
      // }
    }).then(res=>{
      console.log(res.data) // 响应主体（后台数据）
    }).catch(err=>{
      console.log('请求失败')
    })

  </script>
</body>

</html>